<template>
  <view class="con">
    <view class="list">
      <view class="listli flex flex_between" v-for="(item,index) in List">
        <image class="listliz" :src="item.course_pic" mode="widthFix"></image>
        <view class="listliy">
          <view class="listliy1">{{item.title}}</view>
          <view class="listliy2"><rich-text :nodes="item.content"></rich-text></view>
          <view class="listliy3 flex">
            <image class="listliy3_img" v-for="(item2,index2) in item.pics" :src="item2" mode="aspectFill"  @click="previewImage(item.pics,index2)"></image>
          </view>
          <view class="listliy4 flex flex_between">
            <view class="listliy4z flex" @click="goKeChenDe(item)">
              <image class="listliy4z_img" src="/static/index/img40.png" mode="widthFix"></image>
              <view class="listliy4z_c">{{item.title}}</view>
            </view>
            <view class="listliy4y">{{item.time}}</view>
          </view>
        </view>
      </view>
    </view>
  </view> 
</template>

<script>
 import {
   articleQuanlist,//圈子列表
 } from '@/request/api.js'
  export default {
    data() {
      return {
        openid: uni.getStorageSync('openid'), //获取缓存的openid
       List:[], //圈子列表
       page:1,//页码
       total:0,//总共的数量
       pagesizes:15,//每页数量
      }
    },
    onLoad() {
      this.articleQuanlistFun()
    },
    onShow() {
      let totolPage =Math.ceil(this.total / this.pagesizes)
      console.log('总共多少页')
      console.log(totolPage)
      if(this.page<=totolPage){
        this.loadMore(); // 当上拉时加载更多数据
      }
    },
    onReachBottom() {
     let totolPage =Math.ceil(this.total / this.pagesizes)
     console.log('总共多少页')
     console.log(totolPage)
     if(this.page<=totolPage){
       this.loadMore(); // 当上拉时加载更多数据
     }
    },
    methods: {
      previewImage(imgUrls,index) {
        let imgList = []
        let arr = imgUrls
        console.log(imgUrls)
        for(var i=0;i<arr.length;i++){
          imgList.push(arr[i])
        }
        // imgList.push(pic)
        uni.previewImage({
          loop: true,
          current:index,
          urls: imgList // 需要预览的图片http链接列表
        });
      },
     // 获取圈子列表
     articleQuanlistFun(){
       let param = {
         openid:this.openid,
         page:this.page
       }
       articleQuanlist(param).then(res=>{
         console.log('获取圈子列表')
         console.log(res)
         if (res.error_code === 0) {
           this.total = Number(res.data.total);
           this.pagesizes = Number(res.data.pagesizes);
           let listRe = res.data.arrList
           if(listRe.length>0){
             this.List = this.List.concat(listRe);
           }
         }else{
           uni.showToast({
             icon: 'none',
             title: res.msg
           })
         }
       })
     },
     // 加载更多
     loadMore(){
       this.page = this.page+1
       this.articleQuanlistFun()
     },
     // 点击跳转课程id
     goKeChenDe(item){
       uni.navigateTo({
       	url: '/pages/shiZhanDe/index?id=' + item.course_cid
       })
     }
    },
    // 分享微信好友
    onShareAppMessage(event) {
    	console.log(event);
        return {
        	title: '陌上未来，没有焦虑的未来',
        	path: '/pages/circle/index?pid=' + uni.getStorageSync('userInfo').id,
        	// imageUrl: imageUrl
        }
    },
    //分享到朋友圈
    onShareTimeline(event) {
    	console.log(event);
    	return {
    		title: '陌上未来，没有焦虑的未来',
    		path: '/pages/circle/index?pid=' + uni.getStorageSync('userInfo').id,
    		query: 'pid=' + uni.getStorageSync('userInfo').id,
    		// imageUrl: imageUrl
    	}
    }
  }
</script>

<style scoped lang="scss">
  .con {
    background-color: rgba(238,238,238,1);
    width: 100%;
    height: auto;
    padding: 30rpx;
    box-sizing: border-box;
  }
  .list{
    width: 100%;
    height: auto;
    .listli{
      width: 100%;
      height: auto;
      align-items: normal;
      margin-bottom: 60rpx;
      .listliz{
        width:88rpx;
        height: 88rpx;
        border-radius: 10rpx;
        flex-shrink: 0;
        margin-right: 32rpx;
      }
      .listliy{
        width: 600rpx;
        height: auto;
        .listliy1{
          color: rgba(16,16,16,1);
          font-size: 32rpx;
          font-weight: bold;
          margin-bottom: 12rpx;
        }
        .listliy2{
          line-height: 40rpx;
          color: rgba(16,16,16,1);
          font-size: 28rpx;
          margin-bottom: 24rpx;
        }
        .listliy3{
          width: 100%;
          height: auto;
          display: flex;
          flex-wrap: wrap;
          .listliy3_img{
            width: 180rpx;
            height: 180rpx;
            border-radius: 20rpx;
            display: block;
            margin-right: 10rpx;
            margin-bottom: 20rpx;
          }
        }
        .listliy4{
          width: 100%;
          height: auto;
          margin-top: 24rpx;
          .listliy4z{
            width: auto;
            align-items: center;
            .listliy4z_img{
              width: 20rpx;
              height: auto;
              margin-right: 12rpx;
              position: relative;
              top:3rpx;
            }
            .listliy4z_c{
              color: rgba(79,112,205,1);
              font-size: 24rpx;
            }
          }
          .listliy4y{
            color: rgba(155,155,155,1);
            font-size: 24rpx;
          }
        }
      }
    }
  }
  
</style>